본문으로 건너뛰기

useId

🧑🏻‍💻 useId​

useId 는 접근성 속성에 전달할 수 있는 고유 ID를 생성하기 위한 React 훅이다.

✅ useId 문법​

const id = useId()
  • useId는 매개변수를 사용하지 않는다.
  • useId는 특정 컴포넌트 내 특정 useId 와 관련된 고유 ID 문자열을 반환한다.

🧑🏻‍💻 알고 가기​

✅ 동작 원리​

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...
  • useId는 컴포넌트의 최상위 수준에서 호출하여 고유한 ID를 생성한다.

✅ 언제 사용하는지​

const id = useId()

<lable htmlfor={id}>const id = useId()인풋 레이블 </label>
<input id={id} type='text'/>
  • label과 input tag를 연결하려고 할 때 고유한 ID 생성해서 사용한다.

✅ 공식문서 Reference 목차의 주의사항​

  • useId를 목록에서 키를 생성하기 위해 사용하면 안된다.

✅ 서버 렌더링과 함께 사용할 때 ID 일치 문제​

  • 서버 렌더링을 사용하면, useId와 클라이언트에서 동일한 컴포넌트 트리가 필요하다. 서버와 클라이언트에서 렌더링한 트리가 정확히 일치하지 않으면 생성된 ID가 일치하지 않는다.

  • 이때 useId 는 React가 서버 렌더링과 함께 작동하도록 보장한다. React 내부에서 useId는 호출한 컴포넌트의 “부모 경로”에서 생성되기 때문에 클라이언트와 서버 트리가 동일하면 렌더링 순서와 상관 없이 “부모 경로”가 일치하게 되므로, 역시 일치하게 되는 원리이다. 이를 통해 React는 useId를 호출하면 hydration이 작동하고, 서버와 클라이언트의 출력물이 서로 일치하는지 확인할 수 있다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ 여러 관련 요소에 대한 ID 생성​

  • 여러 관련 요소에 ID를 제공해야 하는 경우, useId를 호출하여 해당 요소들이 공유하는 접두사를 생성할 수 있다.
    import { useId } from 'react';

    export default function Form() {
      const id = useId();
      return (
        <form>
          <label htmlFor={id + '-firstName'}>First Name:</label>
          <input id={id + '-firstName'} type="text" />
          <hr />
          <label htmlFor={id + '-lastName'}>Last Name:</label>
          <input id={id + '-lastName'} type="text" />
        </form>
      );
    }

✅ key를 얻어야 할 때​

  • key는 형제간에 고유해야 한다.
  • key는 변경되지 않아야 한다.
  • key는 데이터베이스에서 데이터를 가져오는 경우, 고유한 데이터베이스 key/ID를 사용할 수 있다.
  • 로컬에서 생성된 데이터는 uuid 같은 패키지를 이용해야 한다.